<script type="text/x-template" id="about-page">
    <div class="content-inner about-page">
        <div class="row">
            <div class="col">
                <img src="assets/banner.png" alt="Cider Logo" style="display:block;margin:0 auto;width: 500px;">
                <p style="text-align: center" id="version">{{ $root.getLz("term.version") }} {{ $root.version }}</p>
                <p style="text-align: center"> {{$root.getLz('about.thanks')}} </p>

                <p style="text-align: center">"{{$root.getLz('term.appleMusic')}}" - {{$root.getLz('term.copyright')}} ©
                    2022 <a href="https://www.apple.com/" class="dt-footer__link"
                            target="_blank"
                            rel="noopener" data-dt-link-to-exclude="">{{$root.getLz('term.appleInc')}}</a>
                    {{$root.getLz('term.rightsReserved')}}</p>
                <hr>
                <h3>{{$root.getLz('term.sponsor')}}</h3>
                <button onclick="window.open('https://github.com/sponsors/ciderapp')"
                        class="md-btn sponsorBtn githubBtn"><img src="./assets/github.svg" />GitHub Sponsors
                </button>
                <button onclick="window.open('https://ko-fi.com/cryptofyre')" class="md-btn sponsorBtn kofiBtn"><img
                            src="./assets/ko_fi.svg" />Ko-fi
                </button>
                <button onclick="window.open('https://opencollective.com/ciderapp')"
                        class="md-btn sponsorBtn opencollectiveBtn"><img src="./assets/open_collective.svg" />Open
                    Collective
                </button>
                <h3>{{$root.getLz('term.socials')}}</h3>
                <button onclick="window.open('https://github.com/ciderapp/Cider')" class="md-btn sponsorBtn githubBtn">
                    <img src="./assets/github.svg" />{{$root.getLz('term.github')}}
                </button>
                <button onclick="window.open('https://discord.gg/applemusic')" class="md-btn sponsorBtn discordBtn"><img
                            style="height: 26px;" src="./assets/discord.svg" />{{$root.getLz('term.discord')}}
                </button>
                <button onclick="window.open('https://twitter.com/UseCider')" class="md-btn sponsorBtn twitterBtn"><img
                            src="./assets/twitter.svg" />Twitter
                </button>
                <button onclick="window.open('https://jq.qq.com/?_wv=1027&k=2VP4cdyo')" class="md-btn sponsorBtn qqBtn"><img
                            src="./assets/qq.svg" />QQ
                </button>

            </div>
            <div class="col">
                <div class="row">
                    <div class="col">
                        <h3>{{$root.getLz('term.ciderTeam')}}</h3>
                        <div class="md-btn teamBtn" v-for="member in team" @click="window.open(member.link)">
                            <img :src="member.avatar" />
                            <div class="row" style="width:100%;">
                                <div class="col" style="text-align: left;">
                                    {{ member.name }}
                                </div>
                                <div class="col" style="text-align: right">
                                    <button @click.stop="window.open(member.twitter)" class="social-btn"
                                            v-if="member.twitter">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                             viewBox="0 0 24 24" fill="white" style="">
                                            <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path>
                                        </svg>
                                    </button>
                                </div>
                                <div class="col-auto">
                                    <b>{{ member.role }}</b>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <h3></h3>
                    <h3>{{$root.getLz('term.contributors')}}</h3>
                    <img class="md-contributors"
                         style="cursor:pointer;width:100%;"
                         onclick="window.open('https://github.com/ciderapp/Cider/graphs/contributors')"
                         src="https://contrib.rocks/image?repo=ciderapp/Cider&columns=25" />
                </div>
            </div>
        </div>
    </div>
</script>
<script>
  Vue.component('about-page', {
    template: '#about-page',
    data: function() {
      return {
        window: window,
        version: app.version,
        team: [
          {
            name: 'cryptofyre',
            link: 'https://github.com/cryptofyre',
            role: app.getLz('term.developer'),
            avatar: 'https://avatars.githubusercontent.com/u/33162551?v=4',
            twitter: 'https://twitter.com/cryptofyre'
          },
          {
            name: 'Core',
            link: 'https://github.com/coredev-uk',
            role: app.getLz('term.developer'),
            avatar: 'https://avatars.githubusercontent.com/u/64542347?v=4',
            twitter: 'https://twitter.com/core_hdd'
          },
          {
            name: 'Quacksire',
            link: 'https://github.com/quacksire',
            role: app.getLz('term.developer'),
            avatar: 'https://avatars.githubusercontent.com/u/19170969?v=4',
            twitter: 'https://twitter.com/duckdoquack'
          },
          {
            name: 'booploops',
            link: 'https://github.com/booploops',
            role: app.getLz('term.developer'),
            avatar: 'https://avatars.githubusercontent.com/u/49113086?v=4',
            twitter: 'https://twitter.com/boopl00ps'
          },
          {
            name: 'vapormusic',
            link: 'https://github.com/vapormusic',
            role: app.getLz('term.developer'),
            avatar: 'https://avatars.githubusercontent.com/u/27716185?v=4'
          },
          {
            name: 'Maikiwi',
            link: 'https://github.com/maikirakiwi',
            role: app.getLz('term.developer'),
            avatar: 'https://avatars.githubusercontent.com/u/74925636?v=4',
            twitter: 'https://twitter.com/notmaikiwi'
          },
          {
            name: 'yazninja',
            link: 'https://github.com/yazninja',
            role: app.getLz('term.developer'),
            avatar: 'https://avatars.githubusercontent.com/u/71800112?v=4',
            twitter: 'https://twitter.com/YazNinjaa'
          },
          {
            name: 'GamingLiamStudios',
            link: 'https://github.com/GamingLiamStudios',
            role: app.getLz('term.developer'),
            avatar: 'https://avatars.githubusercontent.com/u/58615717?v=4',
            twitter: 'https://twitter.com/GLStudios_'
          },
          {
            name: 'Amaru',
            link: 'https://github.com/Amaru8',
            role: app.getLz('term.developer'),
            avatar: 'https://avatars.githubusercontent.com/u/52407090?v=4'
          },
          {
            name: 'lockieluke',
            link: 'https://github.com/lockieluke',
            role: app.getLz('term.developer'),
            avatar: 'https://avatars.githubusercontent.com/u/25424409?v=4',
            twitter: 'https://twitter.com/lockie_luke'
          },
          {
            name: 'Swiftzerr',
            link: 'https://github.com/Swiftzerr',
            role: app.getLz('term.developer'),
            avatar: 'https://avatars.githubusercontent.com/u/67812203?v=4'
          },
          {
            name: 'Ishmeet',
            link: 'https://github.com/StupeFied',
            role: app.getLz('term.developer'),
            avatar: 'https://avatars.githubusercontent.com/u/89881655?v=4'
          },
          {
            name: 'Monochromish',
            link: 'https://github.com/Monochromish',
            role: app.getLz('term.developer'),
            avatar: 'https://avatars.githubusercontent.com/u/79590499?v=4'
          },
          {
            name: 'd3rpp',
            link: 'https://github.com/d3rpp',
            role: app.getLz('term.developer'),
            avatar: 'https://avatars.githubusercontent.com/u/45675641?v=4'
          },
          {
            name: 'Void',
            link: 'https://twitter.com/MoonyVoid',
            role: app.getLz('term.socialTeam'),
            avatar: 'https://pbs.twimg.com/profile_images/1226463559472816129/8LScNYED_400x400.jpg'
          },
          {
            name: 'NoseySG',
            link: 'https://twitter.com/noah_grose',
            role: app.getLz('term.socialTeam'),
            avatar: 'https://pbs.twimg.com/profile_images/1496944907260420099/D5gl6H4J_400x400.jpg'
          }
        ]
      }
    },
    methods: {}
  });
</script>
